---
image: /generated/articles-docs-use-img-and-iframe.png
id: use-img-and-iframe
title: <Img>, <Video> and <Audio>
crumb: 'Best practices'
---

**Use [`<Img />`](/docs/img) or [`<Gif />`](/docs/gif)** over the native `<img>` tag, `<Image>` from Next.js and CSS `background-image`.  
**Use [`<OffthreadVideo />`](/docs/offthreadvideo), [`<Video />`](/docs/media/video) or [`<Html5Video />`](/docs/html5-video)** over the native `<video>` tag.  
**Use [`<Audio />`](/docs/media/audio) or [`<Html5Audio />`](/docs/html5-audio)** over the native `<audio>` tag.  
**Use [`<IFrame />`](/docs/iframe)** over the native `<iframe>` tag.

<br />

By using the components from Remotion, you ensure that:

<Step>1</Step> The assets are fully loaded before the the frame is rendered
<br />
<Step>2</Step> The images and videos are synchronized with Remotion's timeline.
